<template>
	<el-container>
		<el-header style="height: auto;">
			<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="attendId" stripe remoteSort remoteFilter>
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="考勤规则" prop="title" width="100" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="考勤时间" prop="subheading" width="200" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.beginTime}}~{{scope.row.endTime}}
					</template>
				</el-table-column>
				<el-table-column label="打卡日期" prop="nowTime" width="150"></el-table-column>
				<el-table-column label="打卡方式" prop="status" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.status==1" type="success" effect="dark">上班打卡</el-tag>
						<el-tag v-else-if="scope.row.status==2" type="warning" effect="dark">下班打卡</el-tag>
						<el-tag v-else type="info" effect="dark">未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="打卡状态" prop="attendType" width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.attendType==='0'">正常</el-tag>
						<el-tag type="warning" v-else-if="scope.row.attendType==='1'">补打卡</el-tag>
						<el-tag type="danger" v-else-if="scope.row.attendType==='2'">迟到</el-tag>
						<el-tag type="danger" v-else-if="scope.row.attendType==='3'">有事早退</el-tag>
						<el-tag type="danger" v-else-if="scope.row.attendType==='4'">早退</el-tag>
						<el-tag  v-else-if="scope.row.attendType==='5'">旷工</el-tag>
						<el-tag type="danger" v-else >未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="经度" prop="longitude" width="100">
				</el-table-column>
				<el-table-column label="纬度" prop="latitude" width="100"></el-table-column>
				<el-table-column label="打卡时间" prop="createTime" width="150"></el-table-column>
				<el-table-column label="打卡端" prop="source" width="100"></el-table-column>
				<el-table-column label="打卡地点" prop="address" width="200" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="打卡说明" prop="remark" width="200" :show-overflow-tooltip="true"></el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'
export default {
	name: 'My Attend Record',
	components: {
		scSelectFilter,
	},
	data() {
		return {
			dialog: {
				save: false,
				detailsSave:false
			},
			filterData: [
				{
					title: "查询年份",
					key: "year",
					multiple: false,
					options: [
						{
							label: "全部",
							value: ""
						},
					]
				},
				{
					title: "查询月份",
					key: "month",
					multiple: false,
					options:[{
						label: "全部",
						value: ""
					},{
						value: '01',
						label: '一月'
					},{
						value: '02',
						label: '二月'
					},{
						value: '03',
						label: '三月'
					},{
						value: '04',
						label: '四月'
					},{
						value: '05',
						label: '五月'
					},{
						value: '06',
						label: '六月'
					},{
						value: '07',
						label: '七月'
					},{
						value: '08',
						label: '八月'
					},{
						value: '09',
						label: '九月'
					},{
						value: '10',
						label: '十月'
					},{
						value: '11',
						label: '十一月'
					},{
						value: '12',
						label: '十二月'
					},]
				},
				{
					title: "打卡状态",
					key: "attendType",
					multiple: false,
					options: [{
						value: '',
						label: '全部'
					},{
						value: '0',
						label: '正常打卡'
					},{
						value: '1',
						label: '补打卡'
					},{
						value: '2',
						label: '迟到'
					},{
						value: '3',
						label: '有事早退'
					},{
						value: '4',
						label: '早退'
					}],
				},
				{
					title: "打卡方式",
					key: "status",
					multiple: false,
					options: [{
						value: '',
						label: '全部'
					},{
						value: '1',
						label: '上班打卡'
					},{
						value: '2',
						label: '下班打卡'
					}],
				}
			],
			apiObj: this.$API.office.attend.getMyAttendList,
			search: {
				year:'',
				month:'',
				attendType:'',
				status: ''
			}
		}
	},
	mounted() {
		this.getMyAttendYear();
	},
	methods: {
		async getMyAttendYear()
		{
			var res = await this.$API.office.attend.getMyAttendYear.get();
			if (res.code == 200) {
				this.filterData[0].options=this.filterData[0].options.concat(res.data);
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		filterChange(data){
			this.search.year = data.year;
			this.search.month = data.month;
			this.search.attendType = data.attendType;
			this.search.status = data.status;
			this.$refs.table.upData(this.search)
		},
	}
}
</script>

<style>
</style>
